<html>
<!--
	This file is part of Limpet.

    Limpet is free software: you can redistribute it and/or modify
    it under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Limpet is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Lesser General Public License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with Limpet.  If not, see http://www.gnu.org/licenses/.
	
	Copyright 2010 Dan Popick
-->
<head>
<title>Limpet Details</title>
<script src="jquery_1.4.2.js" type="text/javascript"></script>
<script src="showHtml.js" type="text/javascript"></script>
<style type="text/css"> 
	body, div, table, tr, th, td, ul, li, ol {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font: normal normal normal 14px/normal helvetica, verdana, tahoma, arial, 'sans serif';
	}

	body {
		padding-top: 10px;
		background: #a00;
	}
	
	ul.limpet {
		display: block;
		list-style-type: none;
		margin: 0;
		padding: 0;
		-webkit-padding-start: 40px;
	}
	
	ul.limpet li {
		display: inline;
		list-style-type: none;
		margin-right: 3px;
		padding: 0 8px;
		background: #fff;
		clear: both;
		color: #a00;
		font: normal normal normal 24px/normal helvetica, verdana, tahoma, arial, 'sans serif';
		font-weight: bold;
		letter-spacing: -1px;
		border: ;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom: solid 1px;
	}
	
	ul.limpet li {
		text-decoration: none;
		color: #a00;
	}
	
	ul.limpet li.selected {
		border-bottom: solid 1px white;
	}
	
	ul.limpet li.selected {
		text-decoration: none;
		color: #000;
	}
	
	div.mainBody {
		background: #fff;
		color: #000;
		margin-left: 20px;
		border-radius: 6px;
		padding: 10px;
		width: 93%;
		height: auto;
	}
	
	table {
		border-collapse: collapse;
	}
	
	tr:nth-child(2n+1) {
		border-radius: 6px;
		background: #ddd;
	}
	
	tr.highlight {
		border-radius: 6px;
		background: #222;
		color: #fff;
	}
	
	td:nth-child(1) {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}
	
	td:last-child {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	
	th {
		background: #a00;
		color: #fff;
		padding: 1px 3px;
		margin: 0;
	}
	
	th {
		border-left: solid 1px #aaa;
		font-weight: bold;
	}
	
	th:nth-child(1) {
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
		border-left: none;
	}
	
	th:last-child {
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	
	td {
		padding: 0 12px 0 9px;
	}
	
</style>

<script src="gibberish-aes.min.js" type="text/javascript"></script>
<script src="base64.js" type="text/javascript"></script>

<script>
var site;
var nav;
var body;

// register for "init" events, which show details for a page
chrome.extension.onRequest.addListener(
	function(request, sender, response) {
		switch (request.command) {
			case "init":
				clear();
				initialize(request.site);
				break;
		};
	});

// reduce full name to something HTML-compatible
function simplifyName(name) { return name.replace(/[^a-zA-Z0-9]/gi, "_"); }

// process page data -- add tabs and show the first
function initialize(siteArg) {
	site = siteArg;
	//console.log("Showing data from popup: " + JSON.stringify(site.data));
	for (var i = 0; i < site.data.length; ++i) {
		var message = site.data[i];
		var simpleName = simplifyName(message.category);
		nav.append("<li id='" + simpleName + "'>" + 
			message.category + "</li>");
		
		$("#" + simpleName).bind('click', message, function(e) {
			showTab(this, e.data);
		});
	}
	
	if (site.data.length > 0) {
		showTab($('ul.limpet li:first-child').get(0), site.data[0]);
	}
}

function decodeMultipartData(base64String) {
    console.log("data to decode:" + base64String + ":");
    var decodedData = Base64.decode(base64String);
    var iv = decodedData.slice(1, decodedData[0] + 1);
    decodedData = decodedData.slice(decodedData[0] + 1);

    console.log(site.name);
    console.log(site.key.toString());

    GibberishAES.size(256);
    return GibberishAES.rawDecrypt(decodedData, Base64.decode(site.key), iv, false);
}

// switch between tabs, loading the contents from the dataUrl
function showTab(sender, messageData) {
	$("ul.limpet li").removeClass("selected");
	sender.className = "selected";
	
	if (messageData.dataUrl) {
		console.log("Fetching data from " + messageData.dataUrl);
		$.get(messageData.dataUrl, function (data) {
		    $('#mainBody').showHtml(
                decodeMultipartData(data.replace(/\s*/g, ''))
            );
		});
	}
}
	
// reset page state
function clear() {	
	$('#limpetNav').empty();
	$('#mainBody').empty();
}

// load handler
function load() {
	nav = $('#limpetNav');
	body = $('#mainBody');
	//clear();
}
	
</script>

</head>
<body onLoad="load();">
<ul class="limpet" id="limpetNav">
	<li class="selected">c # 1</li>
	<li>c # 2</li>
</ul>

<div class="mainBody" id="mainBody">

<h1>Header One</h1>
<h2>Header Two</h2>
<h3>Header Three</h3>
<h4>Header Four</h4>

<table>
	<tr>
	<th> One </th>
	<th> Two </th>
	<th> Three </th>
	</tr>
	<tr>
	<td> One </td>
	<td> Two </td>
	<td> three </td>
	</tr>
	<tr class="highlight">
	<td> One </td>
	<td> Two </td>
	<td> three </td>
	</tr>
	<tr>
	<td> One </td>
	<td> Two </td>
	<td> three </td>
	</tr>
	<tr>
	<td> One </td>
	<td> Two </td>
	<td> three </td>
	</tr>
	<tr>
	<td> One </td>
	<td> Two </td>
	<td> three </td>
	</tr>
</table>

</div>



</body>
</html>